<template>
    <view class="container">
        <tab-bar :tabs="items" @clickTab="clickTab" :tabIndex="tabIndex"></tab-bar>
        <view class="main">
            <swiper
                class="swiper"
                v-if="loadOk"
                :style="{ height: listHeight }"
                :current="tabIndex"
                @change="swiperChange">
                <swiper-item v-for="(swiperItem, swiperIndex) in items" :key="swiperIndex">
                    <task-list
                        ref="swiperItem"
                        class="swiper-item"
                        :height="listHeight"
                        :type="swiperItem.type"></task-list>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
import tabBar from "@/components/common/tab-bar.vue"
import taskList from "@/components/task/task-list.vue"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import config from "@/config/config.js"
// import {
// 	GetTip
// } from "@/service/api/reservation.js"
export default {
    components: {
        tabBar,
        taskList,
    },
    data() {
        return {
            tabIndex: 0,
            listHeight: "",
            loadOk: false,
            items: [
                {
                    title: "待取货",
                    type: 1,
                },
                {
                    title: "待配送",
                    type: 3,
                },
                {
                    title: "待送达",
                    type: 4,
                },
                {
                    title: "已完成",
                    type: 2,
                },
            ],
            per: 4,
            spd: 5,
            dayTimes: "",
            datas: [],
            tipTexts: [
                "18:00-18:59 将有1位预约客户到店",
                "18:00-18:59 将有1位预约客户到店111",
                "18:00-18:59 将有1位预约客户到店333",
            ],
            marqueeheight: "",
            animateUp: false,
            listData: [],
            timer: null,
            filterDate: "",
        }
    },
    mounted() {
        this.getListHeight()
        this.getTip()
    },
    onShow() {},
    methods: {
        getTip() {
            let param = {}
            GetTip(param).then((res) => {
                console.log(res)

                if (res.State) {
                    if (res.Data.length > 0) {
                        this.listData = res.Data
                        this.marqueeheight = this.listData.length * 80 - 80 + "rpx"
                        this.timer = setInterval(this.scrollAnimate, config.textUpTime)
                    }
                }
            })
        },
        //获取列表高度
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e - 40 + "px"
                this.loadOk = true
            })
        },
        //滑动swiper
        swiperChange(e) {
            let tabIndex = e.detail.current
            this.clickTab(tabIndex)
        },
        //tab切换
        clickTab(index) {
            if (this.tabIndex != index) {
                this.tabIndex = index
            }
        },
        voiceFn(text) {
            // let text ="将有1位预约客户到店"
            let src =
                "https://tts.baidu.com/text2audio.mp3?tex=" +
                text +
                "&cuid=baike&amp&lan=ZH&amp&ctp=1&amp&pdt=301&amp&vol=100&amp&rate=32&amp&per=" +
                this.per +
                "&spd=" +
                this.spd
            const innerAudioContext = uni.createInnerAudioContext()
            innerAudioContext.autoplay = true
            innerAudioContext.src = src
            innerAudioContext.onPlay(() => {
                console.log("开始播放")
            })
            innerAudioContext.onError((res) => {
                console.log(res.errMsg)
                console.log(res.errCode)
            })
            innerAudioContext.onEnded((res) => {
                console.log(res)
            })
        },
        scrollAnimate() {
            this.animateUp = true
            setTimeout(() => {
                this.listData.push(this.listData[0])
                this.listData.shift()
                this.animateUp = false
            }, 500)
        },
    },
    //导航栏按钮事件
    onNavigationBarButtonTap(e) {
        let index = e.index
        if (index == 0) {
            //历史记录
            this.easyGoTo("/pages/booking/history")
        }
    },
}
</script>

<style lang="scss">
.main {
    // padding: $app-page-padding 0;

    .swiper-item {
        margin: 0 $app-page-padding;
    }
}

.wait-tip-bar {
    height: 60rpx;
    display: flex;
    align-items: center;
    background: $color-white;
    padding: 0 $app-page-padding;

    text {
        color: $color-orange-1;
    }
}

.marquee-wrap {
    height: 80rpx;
    overflow: hidden;
    background: #ffeced;
    border-radius: 16rpx 16rpx 0 0;
    margin: $app-page-padding $app-page-padding 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    .icon {
        margin: 0 $app-page-padding;
    }
    .marquee-list {
        text {
            display: block;
            width: 100%;
            height: 100%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            list-style: none;
            line-height: 80rpx;
            font-size: $font-size-28;
        }
    }

    .animate-up {
        transition: all 0.5s ease-in-out;
        transform: translateY(-80rpx);
    }
}
</style>
